<template>
    <div>
        <wd-header title="单词查询">
            <router-link to="/singlebook" slot="left">
                <span class="iconfont">&#xe697;</span>
            </router-link>
        </wd-header>
        <div class="search">
            <input type="text" v-model="search" autofocus placeholder="请输入单词,立即查询">
        </div>
        <div class="searchlist">
            <ul>
                <transition-group enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
                    <router-link 
                        tag="li" 
                        v-for="(item,index) in datas" 
                        :key="index"
                        :to="{
                            name:'singleword',
                            params:{
                                word:item.word,
                                phonetic:item.phonogram,
                                explain:item.word_explain,
                                imgurl:item.imgUrl,
                                split:item.split,
                                lenovo:item.associate,
                                wordid:item.wordId,
                                unitid:item.unit_id,
                                classid:item.class_id
                            }
                        }"
                    >
                    {{item.word}}
                    </router-link>
                </transition-group>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'searchword',
    data() {
        return {
            datas: [],
            search: null,
            url: 'http://www.jydsapp.com/jydsApi/api/h5/study/selectWord'
        }
    },
    beforeRouteLeave(to, from, next) {
        let routeData = to.params  //单个单词展示所需数据
        this.$store.commit('saveSingleWordNeedWordData', routeData)
        next()
    },
    watch: {
        search: function(val) {
            if(val){
                let toast = this.$Toast({
                    content: '正在查询…',
                    autoClose:false
                })
                setTimeout(()=>{
                    this.getData(val)
                    toast.close()
                },2500)
            }
        }
    },
    methods: {
        getData(val) {
            let auth = JSON.parse(localStorage.user)
            let str = `{"userPhone":"${auth.user.phoneNum}","token":"${auth.token}","selContent":"${val}"}`
            let toast = this.$Toast({
                content: '正在查询…',
                autoClose:false
            })
            this.fetch({
                method: 'post',
                url: this.url,
                params: {
                    "paramStr": str
                }
            }).then((data) => {
                let res = data.data
                if (res.code == 200) {
                     toast.close()
                     this.datas = JSON.parse(res.data).selWordList
                } else if (res.code == 103) { //五天内未登录 token失效跳转到登陆页面
                    toast.close()
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录',
                        autoClose:true
                    })
                    this.$router.replace('/login')
                } else {
                    toast.close()
                }
            }).catch((err) => {
                
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.animated{
    animation-duration:.2s;
}
.search {
    display: flex;
    input {
        flex: 1;
        padding: 0.37037rem;
        border: 1px solid #eee;
    }
}

.searchlist {
    li {
        padding: 0.37037rem;
        border-bottom: 1px solid #eee;
    }
}
</style>
